@import '../../variables.less';

.chatList {
	display: flex;
	.leftContainer {
		// flex: 5;
		width: @left-container-width;
		background-color: @primary-border_bg-color;
		display: flex;
		flex-direction: column;
		border-right: @primary-border_bg-color 0.2px solid;
		height: 600px;
		.search {
			height: 60px;
		}
		.list {
			height: 540px;
			overflow: auto;
			overflow-y: scroll;
			overflow: overlay;
			.chat_none {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				color: @font-color-lightest;
			}
			.chat_item {
				height: 70px;
				padding-left: 10px;
				display: flex;
				border-bottom: 0.5px solid @item-border-color;
				cursor: pointer;
				.chat_avatar {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					img {
						width: @avatar-list;
						height: @avatar-list;
					}
				}
				.chat_info {
					flex: 2;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding-left: 10px;
					padding-right: 10px;
					.chat_name {
						font-size: 15px;
					}
					.chat_message {
						font-size: 12px;
						width: 100px;
						color: @font-color-lightest;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.chat_info_time {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 12px 10px 0 10px;
					.chat_time {
						font-size: 12px;
						color: @font-color-lightest;
						width: 50px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.chat_unread {
						font-size: 12px;
						color: @font-color-lightest;
						display: flex;
						justify-content: center;
					}
				}
			}
			.chat_item:hover {
				background-color: @item-hover-bg-color;
			}
		}
		.list::-webkit-scrollbar {
			width: 1px;
		}
		.list::-webkit-scrollbar-thumb {
			border-radius: 5px;
			background-color: transparent;
		}
		.list:hover::-webkit-scrollbar-thumb {
			background-color: @scrollbar-thumb-color;
		}
	}
	.rightContainer {
		flex: 12;
		background-color: @deeply-border_bg-color;
		display: flex;
		justify-content: center;
		align-items: center;
		.chat_window {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			.chat_receiver {
				height: 60px;
				font-size: 20px;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding-left: 20px;
			}
			.chat_content {
				height: 320px;
				padding-top: 10px;
				border-top: 1px solid @primary-border_bg-color;
				border-bottom: 1px solid @primary-border_bg-color;
			}
			.chat_input {
				height: 220px;
			}
		}
	}
	.group_icon {
		margin-left: 3px;
	}
}
